<template>

  <van-row type="flex" align="center" justify="space-between" @click="handleClick">
    <van-col><b class="L-text L-bold-text">{{itemdata.title}}</b></van-col>
    <van-col style="text-align:right">
      <!-- <van-icon name="arrow" /> -->
    </van-col>
  </van-row>
  <van-row :gutter="20" type="flex" align="center" class="rank-head">
    <van-col :span="4"></van-col>
    <van-col v-for="(item,index) in itemdata.columnNames" :key="index" :span="10" style="text-align: left;">
      <b class="L-small-text L-bold-text">{{item.label}}</b>
    </van-col>

  </van-row>
  <div class="rank-container">
    <van-row :gutter="20" type="flex" align="center" v-for="(item,index) in itemdata.columnData" :key="index" class="rank-row">
      <van-col :span="4" class="L-text-align-center">
        <!-- <img src="@/assets/images/BIPlogo.png"> -->
        <img v-if="index===0" src="@/assets/images/img_top1.png" style="width: 35px;">
        <img v-if="index===1" src="@/assets/images/img_top2.png" style="width: 35px;">
        <img v-if="index===2" src="@/assets/images/img_top3.png" style="width: 35px;">
        <span class="sortOrder" v-if="index>2">{{index+1}}</span>
      </van-col>
      <van-col v-for="(nitem,nindex) in itemdata.columnNames" :key="nindex" :span="10" style="text-align: left;">
        <div>{{item[nitem.label]}}</div>
        <div v-if="nindex===0"><span class="L-mini-text L-secondary-text-color">销售一部</span></div>

        <!-- {{nitem.label}} -->
      </van-col>

    </van-row>
  </div>

</template>

<script setup lang="ts">
const props = defineProps({
  itemdata: {
    type: Object,
    default: {},
  },
});


function handleClick() {}
</script>

<style scoped>
.rank-container {
  max-height: 300px;
  overflow-y: scroll;
}
.rank-head {
  height: 40px;
  background: #eff4fb;
  color: #999;
  font-weight: bold;
  margin-top: 10px;
}
.rank-row {
  /* height: 40px; */
  border-bottom: 1px solid #eee;
  padding: 5px 0px;
}
.sortOrder {
  position: relative;
  left: 0px;
  bottom: 0px;
  color: #5891e0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eff4fa;

  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: bolder;
  margin:0 auto;
}
</style>